<template>
  <div class="main">
    <!-- 发言框 -->
    <div class="speech">
      <!-- 表情选择框 -->
      <div class="emjoiBox" v-show="EmjoiChoice">
        <span v-show="emjoyKind===0" class="ps">(ps:一个emjoi占俩个字符哦)</span>
        <!-- 经典小黄豆表情包 -->
        <div class="emjoiList" v-show="emjoyKind===0">
          <div v-for="(item,index) in emjoyjson"
          @click="addEmjoy(item)"
          :key="index"
          class="emjoi-item">
            {{ item}}
          </div>
        </div>
        <!-- 喜欢的表情包 -->
        <div class="likeList" v-show="emjoyKind===1">
          暂未开发
        </div>
        <div class="emjoiClass">
          <div class="item tradition" @click="checkKind(0)">{{emjoyjson[0]}}</div>
          <div class="item like" @click="checkKind(1)"> <i class="iconfont">&#xe69d;</i> </div>
        </div>
      </div>
      <!-- 评论功能栏 -->
      <div class="editTab">
        <!-- emjoi表情选择 -->
        <i class="iconfont" @click="showEmjoi()">&#xe670;</i>
        <!-- 添加附件图片 -->
        <i class="iconfont">&#xe716;</i>
        <button v-if="submitflag===1" class="psbutton" @click="submitComment()">提交</button>
        <button v-else class="notpsbutton">提交</button>
        <span class="ps">最多可以编写40个字符哦({{ userComment.length}} / 40)</span>
      </div>
      <!-- 文本输入域 -->
      <textarea class="speechinput"
      @focus="EmjoiChoice=false"
      v-model="userComment"
      placeholder="评论千万条友善第一条" ></textarea>
    </div>
    <!-- 子评论列表 -->
    <div class="commentlist" v-if="commentsonlist.length!==0">
      <TransitionGroup name="list" tag="ul">
      <div class="listitem" v-for="item in list" :key="item.id">
        <div class="userinfo">
          <avatar v-if="item.useravatar!==null" size="40" shape="square" :url="item.useravatar"></avatar>
          <avatar v-else size="40" shape="square" ></avatar>
          <!-- 用户名 -->
          <div class="infoitem username">{{ item.username}}</div>
          <div class="infoitem daytime">{{day(item.date).format('YYYY-MM-DD hh:mm:ss A')}}</div>
          <!-- 更多按钮 提供 举报 删除评论 等功能 -->
          <div class="more" @click.stop="moreIndex = item.id">
            <i class="iconfont">&#xe607;</i>
          </div>
          <div class="morenav" v-show="item.id===moreIndex">
            <div class="item" @click="deleteComment(item.id)">
            <i class="iconfont">&#xe8b6;</i> 删除
            </div>
            <div class="item" @click="reportComment()">
              <i class="iconfont">&#xe60d;</i> 举报
            </div>
            <div class="item">
              <i class="iconfont">&#xe60f;</i> 分享
            </div>
            <div class="item" @click="shield()">
              <i class="iconfont">&#xe6c5;</i> 屏蔽
            </div>
          </div>
        </div>
        <div class="content">
          {{ item.content }}
        </div>
        <!-- 设置点赞 评论 分享-->
        <div class="option">
          <!-- 点赞 -->
          <!-- <div class="option-item">
            <i class="iconfont"
            :class="{hadlikes:item.likes.indexOf(profile.id)!==-1}"
            @click="addLike($event,item.id)"
            >&#xe7c8;</i>
            <span>{{item.likes.length}}</span>
          </div> -->
          <!-- 分享 -->
          <div class="option-item">
            <i class="iconfont">&#xe603;</i>
          </div>
        </div>
      </div>
      <!-- 删除框展示 -->
      <confirmVue
      :title="title"
      :message="message"
      :show="showConfirmation"
      @confirm="confirmDelete"
      @cancel="canelDelete" />
      </TransitionGroup>
    </div>
    <div class="commentlist-none" v-else>
      <img src="@/assets/images/cooldog.svg" class="img" alt="">
      <div class="title">还没有评论，发表第一个评论吧</div>
    </div>

    <div class="footer"></div>
  </div>
</template>
<script>
import store from '@/store'
// 引入emjoi的Josn形态
import emjoyjson from './emjoy.json'
// 引入弹出消息提示用户
import popmessage from '@/components/library/message'
// 调用获取评论列表接口 点赞接口 添加子评论 删除评论
import { findsonComment, addLikes, addsoncomment, deletesoncomment } from '@/api/comments'
// 引用头像组件
import avatar from '@/components/library/avatar.vue'
// 删除确认框
import confirmVue from '@/components/confirm.vue'
import qs from 'qs'
export default {
  name: 'comment-son',
  components: {
    avatar,
    confirmVue
  },
  data: function () {
    return {
      // 绑定用户输入内容
      userComment: '',
      // emjoy数据合集
      emjoyjson: '',
      // 控制表情包选择框展示与否
      EmjoiChoice: false,
      // 控制表情包种类
      emjoyKind: 0,
      // 存放渲染子评论的数据
      list: [],
      // 跟多选项的控制
      moreIndex: 0,
      // 储存用户信息
      profile: [],
      // 有输入内容才显示提交按钮
      submitflag: 0,
      // 删除需要的数据
      title: '',
      message: '删除操作不可撤回确定要删除吗',
      showConfirmation: false,
      deleteNum: 0
    }
  },
  props: {
    // 接收父组件传来的子评论的id数组
    commentsonlist: {
      type: Array,
      required: true
    },
    // 这条父评论的id
    fatherid: {
      type: Number,
      required: true
    }
  },
  watch: {
    // 监控输入字数
    userComment (New, Old) {
      if (New.length > 40) {
        popmessage({ type: 'warn', str: '已达到规定字数' })
        this.userComment = Old
      }
      const content = New.split(' ').join('')
      if (content.length === 0) {
        this.submitflag = 0
      } else {
        this.submitflag = 1
      }
    }
  },
  methods: {
    // 展示表情包选择框
    showEmjoi () {
      this.EmjoiChoice = !this.EmjoiChoice
    },
    // 添加表情
    addEmjoy (emojoi) {
      this.userComment = this.userComment + emojoi
    },
    // 切换表情包种类
    checkKind (num) {
      this.emjoyKind = num
    },
    // 点赞
    addLike (e, id) {
      e.srcElement.style.color = '#3e87e5'
      const i = this.list.findIndex(x => x.id === id)
      addLikes({ id: this.list[i].id }).then(res => {
        // console.log(res.data.message)
        if (res.data.status === 0) {
          this.list[i].likes.push(id)
          popmessage({ type: 'success', str: res.data.message })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 提交评论
    submitComment () {
      addsoncomment({ comment: this.userComment, fatherid: this.fatherid }).then((res) => {
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: '添加子评论成功' })
          // 刷新父组件数据
          this.$emit('update-parent-state', 'new value')
          // 清空评论框
          this.userComment = ''
          // 再次重新接收父组件传来的值 重新获取评论
          setTimeout(() => {
            const list = this.commentsonlist
            // console.log(list)
            findsonComment(qs.stringify({ commentson: list }, { indices: false })).then((res) => {
              this.list = res.data
              // console.log(this.list[0])
              // 将点赞 子评论字段转化为数组其length即是点赞数量————————————————————
              for (let i = 0; i < this.list.length; i++) {
              // 子评论就不搞子评论了 就弄一下点赞
                this.list[i].likes = JSON.parse(this.list[i].likes)
              }
            })
          }, 100)
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 打开删除评论确认框
    deleteComment (id) {
      this.showConfirmation = true
      this.deleteNum = id
      // popmessage({ type: 'warn', str: id })
      // popmessage({ type: 'warn', str: '打开了删除框' })
    },
    // 取消删除评论
    canelDelete () {
      this.showConfirmation = false
      popmessage({ type: 'warn', str: '已取消删除！' })
    },
    // 确认删除评论
    confirmDelete () {
      this.showConfirmation = false
      const commentsonlist = this.commentsonlist
      const commentson = []
      commentsonlist.forEach((item) => {
        if (item !== this.deleteNum) {
          commentson.push(item)
        }
      })
      console.log(commentson)
      // { id: this.deleteNum, fatherid: this.fatherid, newlist: commentson }
      deletesoncomment(qs.stringify({
        id: this.deleteNum, fatherid: this.fatherid, newlist: JSON.stringify(commentson)
      }, { indices: false })).then(res => {
        console.log(res.data)
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: '删除评论成功' })
          this.$emit('update-parent-state', 'new value')
          // 再次重新接收父组件传来的值 重新获取评论
          const list = this.commentsonlist
          findsonComment(qs.stringify({ commentson: list }, { indices: false })).then((res) => {
            this.list = res.data
            // console.log(this.list[0])
            // 将点赞 子评论字段转化为数组其length即是点赞数量————————————————————
            for (let i = 0; i < this.list.length; i++) {
              // 子评论就不搞子评论了 就弄一下点赞
              this.list[i].likes = JSON.parse(this.list[i].likes)
            }
          })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 举报评论
    reportComment () {
      popmessage({ type: 'success', str: '已收到举报，稍后我们将会联系工作人员核实' })
    }
  },
  created () {
    this.emjoyjson = emjoyjson.data.split(',')
    const list = this.commentsonlist
    // console.log(list)
    console.log(qs.stringify({ commentson: list }, { indices: false }))
    findsonComment(qs.stringify({ commentson: list }, { indices: false })).then((res) => {
      this.list = res.data
      // console.log(this.list[0])
      // 将点赞 子评论字段转化为数组其length即是点赞数量————————————————————
      for (let i = 0; i < this.list.length; i++) {
        // 子评论就不搞子评论了 就弄一下点赞
        this.list[i].likes = JSON.parse(this.list[i].likes)
      }
    })
    this.profile = store.state.user.profile
  },
  mounted () {
  // 模拟外部点击
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'dropdownMenu') {
        this.moreIndex = 0
      }
    })
  },
  // 在组件生命周期结束时销毁
  beforeUnmount () {
    window.removeEventListener('click', () => {}, true)
  }
}
</script>
<style scoped lang="less">
.main{
  background-color: white;
  border-radius: 10px;
  width: 800px;
  min-height: 400px;
  max-height: auto;
  .speech{
    margin: 0 auto;
    width: 600px;
    height: 100px;
    position: relative;
    top: 10px;
    background-color: #fff;
    .speechinput{
      width: 80%;
      padding: 14px;
      position: relative;
      top: 30%;
      left: 10%;
      resize:none;
      border-radius: 20px;
    }
  }
  .commentlist{
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: auto;
    width: 600px;
    .listitem{
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 10px;
      width: 620px;
      height: 100px;
      background-color:rgb(212, 212, 212);
      .userinfo{
        height: 40px;
        line-height: 40px;
        display: flex;
        flex-direction: row;

        .infoitem{
          font-family: '钉钉进步体';
          margin-left: 20px;
        }
        .username{
          width: 100px;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 20px;
          color: #3e87e5;
        }
        .daytime{
          line-height: 20px;
          color: #5c5c5c;
        }

        .more{
          position: relative;
          left: 240px;
          top: -10px;
          z-index: 3;
          .iconfont{
            color: rgb(102, 102, 102);
            cursor: pointer;
            line-height: 10px;
          }
        }

        .morenav{
          z-index: 4;
          position: relative;
          top: 44px;
          right: -178px;
          background: rgb(229, 229, 229);
          width: 100px;
          height: 140px;
          box-shadow: 3px 1px 1px 1px #666;
          padding-top: 15px;
          .item{
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top:1px solid #e1e0e0;
            &:hover{
              background: rgb(141, 140, 140);
            }
          }
        }
        .morenav::before{
            position: absolute;
            bottom: 140px;
            left: 35px;
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            border-color:  transparent transparent rgb(229, 229, 229) ;
        }
      }
      .content{
        padding: 5px;
        border-radius: 5px;
        position: relative;
        top: -10px;
        left:60px;
        width: 450px;
        background-color: #f3f3f3;
        line-height: 40px;
        height: 50px;
      }
      .option{
        position: relative;
        left: 520px;
        top: -30px;

        display: flex;
        height:20px;
        width: 80px;
        .option-item{
          margin-right: 20px;
          span{
            margin-left: 10px;
          }
          .iconfont{
            cursor: pointer;
          }
          //渲染是否已经点过赞
          .hadlikes{
            color: #3e87e5;
          }
        }
      }
    }
  }
  //没有评论时候的样式
  .commentlist-none{
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: 300px;
    width: 600px;

    .img{
      position: relative;
      left: 200px;
    }
    .title{
      font-family: '钉钉进步体';
      text-align: center;
      width: 100%;
      font-size: 24px;
      height: 100px;
      line-height: 100px;
    }
  }

  .footer{
    height: 100px;
  }
}

//表情包合集框
.emjoiBox{
  background: rgba(151, 150, 150, 0.8);
  height: 200px;
  width: 400px;
  border: 1px solid gray;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: -200px;
  left: 10%;
  .ps{
    z-index: auto;
    position: absolute;
    left: 60px;
    font-size: 10px;
    color: gray;
  }
  .emjoiClass{
    border-top: 1px solid gray;
    position:absolute;
    right: 50px;
    bottom: 4px;
    display: flex;
    line-height: 30px;
    height: 30px;
    width: 300px;
    .item{
      width: 30px;
      height: 30px;
      cursor: pointer;
      margin-left: 10px;
      margin-right: 10px;
    }
    .like{
      color: red;
    }
  }
  //emjoi表情包列表
  .emjoiList{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 10px;
    right: 50px;
    overflow: auto;
    height: 140px;
    max-height: 140px;
    width: 300px;

    .emjoi-item{
      text-align: center;
      cursor: pointer;
      margin-right: 10px;
      margin-left: 10px;
      margin-top: 10px;
      width: 20px;
      height: 20px;

      &:hover{
        font-size: 20px;
        line-height: 30px;
        position: relative;
        top: -5px;
        right: 5px;
      }
    }
  }

  .likeList{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 10px;
    right: 50px;
    overflow: auto;
    height: 140px;
    max-height: 140px;
    width: 300px;
  }
}

.editTab{
  z-index: 1;
  height: 30px;
  line-height: 30px;
  width: 80%;
  position: absolute;
  right: 10%;
  top: 0;
  .iconfont{
    cursor: pointer;
    margin-left: 40px;
    font-size: 24px;
    &:hover{
      color: #3e87e5;
    }
  }
  .ps{
    float: right;
    line-height: 30px;
    font-size: 10px;
    color: gray;
    font-family: '钉钉进步体';
  }
  .psbutton{
    cursor: pointer;
    position: relative;
    top: 5px;
    left: 2px;
    float: right;
    width: 40px;
    height: 20px;
    line-height: 18px;
    font-size: 10px;
    background-color: #3e87e5;
    border: none;
    border-radius: 4px;
    color: white;
    font-family: '钉钉进步体';
    &:active{
      border: 1px solid #001938;
    }
  }
  .notpsbutton{
    pointer-events: none;
    position: relative;
    top: 5px;
    left: 2px;
    float: right;
    width: 40px;
    height: 20px;
    line-height: 18px;
    font-size: 10px;
    background-color: #6e6e6e;
    border: none;
    border-radius: 4px;
    color: white;
    font-family: '钉钉进步体';
  }
}

  //评论列表渲染动画
  .list-move, /* 对移动中的元素应用的过渡 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  /* 确保将离开的元素从布局流中删除
    以便能够正确地计算移动的动画。 */
  .list-leave-active {
    position: absolute;
  }
</style>
